<template>
  <view class="pm-process-todo">
    <virtual-table
      ref="vTableRef"
      :handler-get-list="getBpmNum"
      v-model:page-no="queryParams.pageNo"
      v-model:page-data="pageData"
      :total="queryParams.total"
      :page-size="queryParams.pageSize"
    >
      <view v-for="(page, key) in pageData" :key="page.pageNo">
        <view class="pm-pt-item" v-for="(item, key) in page.list" :key="'pm-pt-item_' + key" @click="handleClick(item)">
          <view class="pm-pt-name flex flex-row justify-between">
            <view class="process-project flex-grow-1">{{item.name}}-{{item.processInstance.projectName}}</view>
            <view class="goto-icon flex flex-row justify-center align-center flex-shrink-0">
              <uni-icons color="#fff" type="right" size="15"></uni-icons>
            </view>
          </view>
          <view class="pm-pt-detail flex flex-row justify-between">
            <view class="detail-item">
              <text class="pt-detail-label">发起人：</text>
              <text class="pt-detail-value">{{getStartName(item.processInstance.startUserNickname) }}</text>
            </view>
            <view class="detail-item">
              <text class="pt-detail-label">发起时间：</text>
              <text class="pt-detail-value">{{formatTime(item.createTime, 'YYYY-MM-DD HH:mm')}}</text>
            </view>
          </view>
        </view>
      </view>
    </virtual-table>
  </view>
</template>

<script setup lang="ts">
import {usePmBpmApi} from "@/api/pm/bpm";
import {formatTime} from "@/utils/formatTime";
import {currRoute} from "@/utils";

const props = defineProps({
  processName: {
    type: String,
    default: null,
  }
})

defineOptions({ name: 'PmProcessTodo'})

const pageData = ref<Array<VirtualTableData>>([]);
function getBpmNum() {
  return new Promise((resolve, reject) => {
    usePmBpmApi().getBpmTodoPage(queryParams).then((res: any) => {
      if (res.code === 0 && res.data) {
        queryParams.total = res.data.total;
        resolve(res.data.list);
      } else {
        reject(res.data)
      }
    }).catch((err) => {
      reject(err);
    })
  })
}

const vTableRef = ref();
function handleSelect() {
  queryParams.pageNo = 1;
  queryParams.name = props.processName
  if (vTableRef.value) {
    vTableRef.value.getData();
  }
}

function getStartName(name: string) {
  if (!name) {
    return name
  }
  return name.split('-')?.[0] || name
}

function handleClick(item: any) {
  const path = currRoute().path;
  uni.navigateTo({
    url: `/pmPages/bpm/approval/index?`+
      `process_instance_id=${item.processInstance.id}`+
      `&project_number=${item.processInstance.projectNumber}`+
      `&id=${item.processInstance.businessKey}`
  })
}

const queryParams = reactive<{
  pageSize: number,
  pageNo: number,
  total: number,
  name: string,
}>({
  pageSize: 10,
  pageNo: 1,
  total: 0,
  name: null,
})

defineExpose({
  handleSelect
})
</script>

<style scoped lang="scss">
.pm-process-todo {
  margin-top: 24rpx;
  height: 100%;
  box-sizing: border-box;

  .pm-pt-item {
    padding-top: 30rpx;
    border-bottom: 1px solid #D8D8D8;
    padding-bottom: 24rpx;

    .pm-pt-name {
      .process-project {
        color: #333333;
        font-size: 14px;
        @include text-overflow(1);
      }

      .goto-icon {
        background-color: #3F7DF8;
        width: 48rpx;
        height: 48rpx;
        border-radius: 50%;
        box-shadow: 0 2px 4px rgba(63, 125, 248, 0.3);
      }
    }

    .pm-pt-detail {
      font-size: 26rpx;
      margin-top: 24rpx;

      .detail-item {
        @include text-overflow(1);
      }

      .pt-detail-label {
        color: #999999;
      }

      .pt-detail-value {
        color: #333333;
      }
    }
  }
}
</style>
